<template>
  <div class="project-monitor">
    <a-card title="工程执行状态监控" :bordered="false">
      <div style="display:flex;width:100%;justify-content: space-between;">
        <!-- 工程基本信息 -->
        <div class="project-info">
          <div class="info-item">
            <span class="label">工程名称：</span>
            <span class="value">{{ projectInfo.testName }}</span>
          </div>
          <div class="info-item">
            <span class="label">工程信息：</span>
            <span class="value">{{ projectInfo.testDescription }}</span>
          </div>
        </div>

        <!-- 用例状态表格 -->
        <div class="case-table-section">
          <h3 class="section-title">用例执行状态</h3>
          <a-table :columns="caseColumns" :data-source="caseData" :pagination="false" size="middle" class="case-table">
            <template slot="status" slot-scope="status">
              <a-tag :color="getStatusColor(status)">
                {{ status }}
              </a-tag>
            </template>
          </a-table>
        </div>
      </div>

      <!-- 执行日志 -->
      <div class="execution-log">
        <h3 class="section-title">执行日志</h3>
        <div class="log-container">
          <div v-for="(log, index) in executionLogs" :key="index" class="log-item">
            <span class="log-content"
              ><span>{{ log.time }} {{ log.content }}</span>
            </span>
          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
import { httpAction, getAction, deleteAction } from '@/api/manage'
import { mapGetters } from 'vuex'
export default {
  name: 'ProjectMonitor',
  data() {
    return {
      queryParams: {},
      projectInfo: {
        testName: '硬件监控系统',
        testDescription: 'RS422通信配置测试工程'
      },
      caseColumns: [
        {
          title: '用例名称',
          dataIndex: 'caseName',
          key: 'caseName'
        },
        {
          title: '执行时长',
          dataIndex: 'time',
          key: 'time'
        },
        {
          title: '用例状态',
          dataIndex: 'status',
          key: 'status',
          scopedSlots: { customRender: 'status' }
        }
      ],
      caseData: [
        // {
        //   key: '1',
        //   name: '用例1 - RS422基础通信测试',
        //   status: '执行结束',
        //   time: '1分钟'
        // },
        // {
        //   key: '2',
        //   name: '用例2 - RS422数据收发测试',
        //   status: '执行中',
        //   time: '2分钟'
        // },
        // {
        //   key: '3',
        //   name: '用例3 - RS422异常处理测试',
        //   status: '未开始',
        //   time: '21分钟'
        // }
      ],
      executionLogs: [
        // {
        //   content: '2025-10-12 10:25:36 用例1 开始执行'
        // },
        // {
        //   content: '2025-10-12 10:25:37 用例1 执行结束'
        // },
        // {
        //   content: '2025-10-12 10:25:38 用例2 开始执行'
        // },
        // {
        //   content: '2025-10-12 10:25:39 用例2 配置参数加载完成'
        // }
      ],
      url: {
        list: '/engineeringManagement/list'
      }
    }
  },
  computed: {
    ...mapGetters(['websocketMsg']),
    websocketMsg() {
      return this.$store.state.user.websocketMsg
    }
  },
  created() {
    // 在 created 钩子中获取参数
    this.queryParams = this.$route.query
    console.log('接收到的参数:', this.queryParams)

    // 或者直接使用
    console.log('ID:', this.$route.query.id)
    console.log('名称:', this.$route.query.name)
    this.getInfo()
  },
  mounted() {
    // 在 created 钩子中获取参数
    this.queryParams = this.$route.query
    console.log('接收到的参数:', this.queryParams)
    this.getInfo()
  },

  watch: {
    websocketMsg: {
      handler(val) {
        try {
          let msg = JSON.parse(val)
          console.log(val, 'socket数据', msg.header.timestamp)
          let txt = this.formatBodyDataGeneric(msg.body)
          this.executionLogs.push({ time: msg.header.timestamp, content: txt })
        } catch (error) {
          console.error('解析websocket消息失败:', error)
        }
      },
      deep: true, // 开启深度监听
      immediate: false // 可选：是否立即执行一次
    },
    // 监听路由变化
    '$route.query': {
      handler(newQuery) {
        this.queryParams = newQuery
        this.getInfo()
        console.log('参数变化:', newQuery)
      },
      immediate: true
    }
  },
  methods: {
    formatBodyDataGeneric(body) {
      const result = []

      for (const [key, value] of Object.entries(body)) {
        if (key !== 'cmd_msgid') {
          if (typeof value === 'object' && value !== null) {
            // 如果是对象，将其JSON序列化
            result.push(`${key}:${JSON.stringify(value)}`)
          } else {
            result.push(`${key}:${value}`)
          }
        }
      }

      return result.join(',')
    },
    getInfo() {
      getAction(this.url.list, { id: this.$route.query.id }).then(res => {
        console.log(res, 'res')
        if (res.success) {
          this.projectInfo = res.result.records[0]
          this.caseData = res.result.records[0].caseList
        }
      })
    },
    getStatusColor(status) {
      const colorMap = {
        执行结束: 'green',
        执行中: 'blue',
        未开始: 'default',
        执行失败: 'red'
      }
      return colorMap[status] || 'default'
    }
  }
}
</script>

<style scoped>
.project-monitor {
  padding: 20px;
  background: #f0f2f5;
  min-height: 100vh;
}

.project-info {
  width: 30%;
  background: #fafafa;
  padding: 16px;
  border-radius: 6px;
  margin-bottom: 24px;
  border: 1px solid #e8e8e8;
}

.info-item {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.info-item:last-child {
  margin-bottom: 0;
}

.label {
  font-weight: 600;
  color: #333;
  min-width: 80px;
}

.value {
  color: #666;
  flex: 1;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #1890ff;
}

.case-table-section {
  width: 69%;

  margin-bottom: 24px;
}

.case-table {
  background: #fff;
  border-radius: 6px;
}

.execution-log {
  background: #fff;
  padding: 16px;
  border-radius: 6px;
  border: 1px solid #e8e8e8;
}

.log-container {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  padding: 8px;
}

.log-item {
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
}

.log-item:last-child {
  border-bottom: none;
}

.log-time {
  color: #1890ff;
  font-weight: 500;
  min-width: 180px;
  margin-right: 16px;
}

.log-content {
  display: flex;
  color: #333;
  /* flex: 1; */
}

/* 滚动条样式 */
.log-container::-webkit-scrollbar {
  width: 6px;
}

.log-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.log-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.log-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>
